import React, { Component } from "react";
import { Link } from "react-router-dom";
import "./Header.css";

class Header extends Component {
    render() {
        const { username, onLogout, location } = this.props;
        return (
            <div className="header">
                <div className="nav">
                    <span className="left-link">
                        <Link to="/">首页</Link>
                    </span>
                    {username && username.length > 0 ? (
                        <span className="user">
                        当前用户：{username}&nbsp;<button onClick={onLogout}>注销</button>
                    </span>
                    ) : (
                        <span className="right-link">
              <Link to={{ pathname: "/login", state: { from: location } }}>
                登录
              </Link>
            </span>
                    )}
                </div>
            </div>
        );
    }
}

export default Header;
